
/**
 * 弹框头部切换组件
 */
const headSwitchCom = {
    model: {
        prop: "value",
        event: "change"
    },
    props: {
        // mode传值
        value: {
            type: Number,
            default: 0
        },
        // 切换列表
        list: {
            type: Array,
            default: () => []
        }
    },
    template: `
        <div class="head-switch-com-box">
            <p :class="currentIndex === index? 'active' : ''" @click="changeIndex(index)" v-for="(item,index) in list" :key="index">{{item.title || item}}</p>
        </div>
    `,
    data() {
        return {

        }
    },
    computed: {
        // 当前选中的索引
        currentIndex() {
            return this.value;
        },
    },
    methods: {
        /**
         * 切换索引
         */
        changeIndex(index) {
            this.$emit("change", index);
        }
    },
    mounted() {

    }
};
Vue.component('head-switch-com', headSwitchCom);


/**
 * 内部按钮组件
 */
Vue.component("inner-btn-com", {
    model: {
        prop: "value",
        event: "change"
    },
    props: {
        // 选中的索引
        value: {
            type: Number,
            default: 0
        },
        // 按钮列表
        btnList: {
            type: Array,
            default: () => []
        }
    },
    template: `
        <div class="inner-btn-com-box">
            <p :class="currentIndex === index? 'active' : ''" v-for="(item,index) in btnList" @click="changeIndex(index)" :key="index + 'btn'">
                <span>{{item.name}}</span>
            </p>
        </div>
    `,
    computed: {
        // 当前选中的索引
        currentIndex() {
            return this.value;
        },
    },
    methods: {
        /**
         * 切换索引
         */
        changeIndex(index) {
            this.$emit("change", index);
        }
    }
});

/**
 * 弹框组件
 */
const dialogCom = {
    props: {
        // 弹框是否显示
        visible: {
            type: Boolean,
            default: false
        },
        // 头部标题
        title: {
            type: String,
            default: ''
        },
        // 头部列表
        list: {
            type: Array,
            default: () => []
        },
        // 弹框类型
        dialogType: {
            type: String,
            default: ''
        },
        // 弹框宽度
        width: {
            type: String,
            default: '60%'
        },
        // 弹框高度
        height: {
            type: String,
            default: '75vh'
        }
    },
    template: `
        <el-dialog append-to-body class="dialog-class" title="" :width="width" :visible.sync="dialogVisible">
            <div class="dialog-content-big-box" :style="{height: height}">
                <div class="dialog-content-big-box-head">
                    <div class="dialog-content-big-box-head-left">
                        <span v-show="title">{{title}}</span>
                        <head-switch-com v-model="currentIndex" v-if="list.length > 0" :list="list"></head-switch-com>
                    </div>
                    <div @click="dialogClose" class="dialog-back"></div>
                </div>
                <div class="dialog-content-big-box-content">
                    <component :is="dialogType" :index="currentIndex"></component>
                </div>
            </div>
        </el-dialog>
    `,
    data() {
        return {
            currentIndex: 0
        }
    },
    computed: {
        dialogVisible: {
            get() {
                return this.visible
            },
            set(val) {
                this.$emit('update:visible', val);
            }
        }
    },
    methods: {
        /**
         * 弹框关闭
         */
        dialogClose() {
            this.dialogVisible = false;
        }
    },
};
Vue.component("dialog-com", dialogCom);


/**
 * 全程机械化作业服务
 */
Vue.component("qcjxhzyfw-com", {
    props: {

    },
    template: `
        <div class="qcjxhzyfw-com-box">
            <p>
                <img src="../../resources/img/jiangshan/hnbt-icon.png" alt="">
                <span>惠农补贴列表</span>
            </p>
            <div class="qcjxhzyfw-com-table">
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="date" label="序号">
                    </el-table-column>
                    <el-table-column prop="date" label="农机SN">
                    </el-table-column>
                    <el-table-column prop="date" label="农机类别">
                    </el-table-column>
                    <el-table-column prop="date" label="作业状态">
                    </el-table-column>
                    <el-table-column prop="date" label="作业位置">
                        <template slot-scope="scope">
                            <div class="dialog-position-box">
                                <img src="../../resources/img/jiangshan/dialog-position.png" alt="">
                                <span>江山市-张村乡</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-box">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paginationConfig.total"
                    :current-page="paginationConfig.currentPage"
                    :page-size="paginationConfig.pageSize"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>
    `,
    data() {
        return {
            // 表格数据
            tableData: [
                {
                    date: '2016-05-02'
                }
            ],
            // 分页配置
            paginationConfig: {
                currentPage: 1,
                pageSize: 10,
                total: 500
            }
        }
    },
    methods: {
        /**
         * 分页页数改变
         */
        handleCurrentChange(val) {
            this.paginationConfig.currentPage = val;
        },
        /**
         * 分页每页显示条数改变
         */
        handleSizeChange(val) {
            this.paginationConfig.pageSize = val;
        }
    },
    mounted() {

    }
});


/**
 * 集中育苗 | 农事托管
 */
Vue.component("jzymnstg-com", {
    props: {
        // 当前索引
        index: {
            type: Number,
            default: 0
        }
    },
    template: `
        <div class="jzymnstg-com-box">
            <div class="jzym-com-box" v-show="index === 0">
                <div class="jzym-com-top">
                    <div class="jzym-com-top-box" v-for="(item,index) in topJzymList" :key="index">
                        <p :class="item.class">
                            <span>{{item.number}}</span>
                            <span>{{item.unit}}</span>
                        </p>
                        <span>{{item.name}}</span>
                    </div>
                </div>
                <div class="jzym-com-middle">
                    <p>
                        <img src="../../resources/img/jiangshan/hnbt-icon.png" alt="">
                        <span class="gradient-FFE932">育苗床概况</span>
                    </p>
                    <div class="jzym-legend-box">
                        <div class="jzym-legend">
                            <div></div>
                            <span>已使用</span>
                        </div>
                        <div class="jzym-legend">
                            <div></div>
                            <span>未使用</span>
                        </div>
                    </div>
                </div>
                <div class="jzym-com-bottom">
                    <xs-cell-selector v-if="index === 0"></xs-cell-selector>
                </div>
            </div>
            <div class="nstg-com-box" v-show="index === 1">
                <div class="jzym-com-top">
                    <div class="jzym-com-top-box" v-for="(item,index) in topNstjList" :key="index">
                        <p :class="item.class">
                            <span>{{item.number}}</span>
                            <span>{{item.unit}}</span>
                        </p>
                        <span>{{item.name}}</span>
                    </div>
                </div>
                <div class="jzym-com-table">
                    <el-table :data="tableData" stripe style="width: 100%">
                        <el-table-column prop="date" label="序号">
                        </el-table-column>
                        <el-table-column prop="date" label="农户姓名">
                        </el-table-column>
                        <el-table-column prop="date" label="托管类型">
                        </el-table-column>
                        <el-table-column prop="date" label="合同时间">
                        </el-table-column>
                        <el-table-column prop="date" label="服务总面积">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-box">
                    <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="paginationConfig.total"
                        :current-page="paginationConfig.currentPage"
                        :page-size="paginationConfig.pageSize"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            // 集中育苗头部列表
            topJzymList: [
                { number: 11262, unit: "亩", name: "预计秧苗播种面积", class: "gradient-32F0FF" },
                { number: 18, unit: "个", name: "育秧床总数", class: "gradient-16F025" },
                { number: 12, unit: "个", name: "已使用", class: "gradient-EBF30F" },
                { number: 6, unit: "个", name: "未使用", class: "gradient-F98D0D" },
                { number: 6, unit: "个", name: "育苗品种", class: "gradient-0D9DF9" },
            ],

            // 农事托管头部列表
            topNstjList: [
                { number: 102, unit: "次", name: "保姆式托管", class: "gradient-32F0FF" },
                { number: 96, unit: "次", name: "菜单式托管", class: "gradient-16F025" },
                { number: 1021, unit: "次", name: "点单式托管", class: "gradient-EBF30F" }
            ],
            // 农事托管表格数据
            tableData: [
                {
                    date: '2016-05-02'
                }
            ],
            // 分页配置
            paginationConfig: {
                currentPage: 1,
                pageSize: 10,
                total: 500
            }
        }
    },
    methods: {
        /**
         * 分页页数改变
         */
        handleCurrentChange(val) {
            this.paginationConfig.currentPage = val;
        },
        /**
         * 分页每页显示条数改变
         */
        handleSizeChange(val) {
            this.paginationConfig.pageSize = val;
        }
    },
    mounted() {

    }
});


/**
 * 农资配送 | 农业废弃物回收 
 */
Vue.component("nzpsnyfqphs-com", {
    props: {
        // 当前组件索引
        index: {
            type: Number,
            default: 0
        }
    },
    template: `
        <div class="nzpsnyfqphs-com-box">
            <div class="nzps-com-box" v-show="index === 0">
                <inner-btn-com v-model="activeBtn" :btn-list="btnList"></inner-btn-com>
                <div class="nzps-com-content" v-show="activeBtn === 0">
                    <p>
                        <img src="../../resources/img/jiangshan/hnbt-icon.png" alt="">
                        <span class="gradient-FFE932">农资配送流程</span>
                    </p>
                    <div class="psgl-top-box">
                        <div class="psgl-top-box-bac">
                            <div class="psgl-top-box-bac-top">
                                <img src="../../resources/img/jiangshan/dialog-nzps-js.png" alt="">
                            </div>
                            <p class="gradient-32F0FF">农资订单集中接收</p>
                        </div>
                        <div class="psgl-top-box-jt">
                            <img src="../../resources/img/jiangshan/dialog-nzps-jt.png" alt="">
                        </div>
                        <div class="psgl-top-box-bac">
                            <div class="psgl-top-box-bac-top">
                                <img src="../../resources/img/jiangshan/dialog-nzps-ps.png" alt="">
                            </div>
                            <p class="gradient-32F0FF">待分配配送</p>
                        </div>
                        <div class="psgl-top-box-jt">
                            <img src="../../resources/img/jiangshan/dialog-nzps-jt.png" alt="">
                        </div>
                        <div class="psgl-top-box-bac">
                            <div class="psgl-top-box-bac-top">
                                <img src="../../resources/img/jiangshan/dialog-nzps-ff.png" alt="">
                            </div>
                            <p class="gradient-32F0FF">快递物流分发</p>
                        </div>
                        <div class="psgl-top-box-jt">
                            <img src="../../resources/img/jiangshan/dialog-nzps-jt.png" alt="">
                        </div>
                        <div class="psgl-top-box-bac">
                            <div class="psgl-top-box-bac-top">
                                <img src="../../resources/img/jiangshan/dialog-nzps-dh.png" alt="">
                            </div>
                            <p class="gradient-32F0FF">农资配送到货</p>
                        </div>
                    </div>
                    <p>
                        <img src="../../resources/img/jiangshan/hnbt-icon.png" alt="">
                        <span class="gradient-FFE932">今日数据概览</span>
                    </p>
                    <div class="jzym-com-top">
                        <div class="jzym-com-top-box" v-for="(item,index) in todyDataList" :key="index">
                            <p :class="item.class">
                                <span>{{item.number}}</span>
                                <span>{{item.unit}}</span>
                            </p>
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                    <div class="psgl-chart-box">
                        <top-chart v-if="activeBtn === 0 && index === 0" :option="chartOption"></top-chart>
                    </div>
                </div>
                <div class="nzps-com-content" v-show="activeBtn === 1">
                    <div class="nzsp-table-box">     
                        <div class="table-head">
                            <li>农资名称</li>
                            <li>农资类别</li>
                            <li>登记证号</li>
                            <li>认证商家</li>
                            <li>更多</li>
                        </div>
                        <ul>
                            <div class="nzsp-table-content" v-for="(item,index) in nzspTableData" :key="index + 'nzsp'"">
                                <li>
                                    <p>{{item.name}}</p>
                                    <p>{{item.type}}</p>
                                    <p>{{item.number}}</p>
                                    <p>{{item.componey}}</p>
                                    <p :class="item.expand?'expand-active':''" @click="item.expand =!item.expand" class="expand">{{item.expand?'收起':'展开'}} <i class="el-icon-arrow-up"></i></p>
                                </li>
                                <div class="table-more" v-show="item.expand">
                                    
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
                <div class="nzps-com-content" v-show="activeBtn === 2">
                    <div class="nzlydj-com-table">
                        <el-table :data="nzlydjTableData" stripe style="width: 100%">
                            <el-table-column prop="date" label="农资名称">
                            </el-table-column>
                            <el-table-column prop="date" label="农资类别">
                            </el-table-column>
                            <el-table-column prop="date" label="登记证号">
                            </el-table-column>
                            <el-table-column prop="date" label="领用时间">
                            </el-table-column>
                            <el-table-column prop="date" label="领用人">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pagination-box">
                        <el-pagination
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="paginationConfig.total"
                            :current-page="paginationConfig.currentPage"
                            :page-size="paginationConfig.pageSize"
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <div class="nzps-com-box" v-show="index === 1">
                <inner-btn-com v-model="nyfqhsActiveBtn" :btn-list="nyfqhsBrnList"></inner-btn-com>
                <div class="nzps-com-content hsgl-com-content" v-show="nyfqhsActiveBtn === 0">
                    <p>
                        <img src="../../resources/img/jiangshan/hnbt-icon.png" alt="">
                        <span class="gradient-FFE932">今日数据概览</span>
                    </p>
                    <div class="jzym-com-top">
                        <div class="jzym-com-top-box" v-for="(item,index) in hsglTopList" :key="index">
                            <p :class="item.class">
                                <span>{{item.number}}</span>
                                <span>{{item.unit}}</span>
                            </p>
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                    <div class="nzlydj-com-table">
                        <el-table :data="hsglTableData" stripe style="width: 100%">
                            <el-table-column prop="date" label="回收种类">
                            </el-table-column>
                            <el-table-column prop="date" label="回收量">
                            </el-table-column>
                            <el-table-column prop="date" label="回收时间">
                            </el-table-column>
                            <el-table-column prop="date" label="发放积分">
                            </el-table-column>
                            <el-table-column prop="date" label="回收人员">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pagination-box">
                        <el-pagination
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="hsglPaginationConfig.total"
                            :current-page="hsglPaginationConfig.currentPage"
                            :page-size="hsglPaginationConfig.pageSize"
                            @current-change="hsglCurrentChange"
                            @size-change="hsglSizeChange">
                        </el-pagination>
                    </div>
                </div>
                <div class="nzps-com-content hslc-com-content" v-show="nyfqhsActiveBtn === 1">
                    <div class="hslc-content-top">
                        <div class="hslc-content-top-box">
                            <div class="hslc-top_box">
                                <div class="hslc-top_box_img">
                                    <img src="../../resources/img/jiangshan/dialog-hslc-hs.png" alt="">
                                </div>
                                <p>线上预约回收</p>
                            </div>
                            <div class="hslc-top_box" style="margin-top: 1rem;">
                                <div class="hslc-top_box_img">
                                    <img src="../../resources/img/jiangshan/dialog-hslc-zd.png" alt="">
                                </div>
                                <p>线下回收站点</p>
                            </div>
                        </div>
                        <div class="hslc-content-top-icon">
                            <img src="../../resources/img/jiangshan/dialog-hslc-jt.png" alt="">
                        </div>
                        <div class="hslc-content-top-box">
                            <div class="hslc-top_box">
                                <div class="hslc-top_box_img">
                                    <img src="../../resources/img/jiangshan/dialog-hslc-jl.png" alt="">
                                </div>
                                <p>农业废品分类计量</p>
                            </div>
                        </div>
                        <div class="hslc-content-top-icon">
                            <img src="../../resources/img/jiangshan/dialog-hslc-jt.png" alt="">
                        </div>
                        <div class="hslc-content-top-box">
                            <div class="hslc-top_box">
                                <div class="hslc-top_box_img">
                                    <img src="../../resources/img/jiangshan/dialog-hslc-jf.png" alt="">
                                </div>
                                <p>扫码确认回收 \n 领取积分</p>
                            </div>
                        </div>
                        <div class="hslc-content-top-icon">
                            <img src="../../resources/img/jiangshan/dialog-hslc-jt.png" alt="">
                        </div>
                        <div class="hslc-content-top-box">
                            <div class="hslc-top_box">
                                <div class="hslc-top_box_img">
                                    <img src="../../resources/img/jiangshan/dialog-hslc-dz.png" alt="">
                                </div>
                                <p>等待积分到账</p>
                            </div>
                        </div>
                    </div>
                    <div class="hslc-content-bottom">
                        <h5>积分规则：</h5>
                        <p>1、1分=0.1人民币  ;  2、农资瓶/桶装每公斤10分  ;  3、农资袋装每公斤5分  ;  4、农膜每公斤4分</p>
                        <span>(积分可用于农资购买抵扣现金，或进行提现)</span>
                    </div>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            // 按钮列表
            btnList: [
                { name: "配送概览" },
                { name: "农资商品" },
                { name: "农资领用登记" }
            ],
            // 按钮选中状态
            activeBtn: 0,

            // 今日数据概览数据
            todyDataList: [
                { number: 654, unit: "单", name: "配送订单", class: "gradient-32F0FF" },
                { number: 36, unit: "单", name: "待分配配送", class: "gradient-16F025" },
                { number: 242, unit: "单", name: "配送进行中", class: "gradient-EBF30F" },
                { number: 376, unit: "单", name: "配送已完成", class: "gradient-F98D0D" }
            ],


            // 农资商品列表
            nzspTableData: [
                { name: "阿维菌素 1.8%", type: "杀虫剂", number: "PD20093406", componey: "安徽美程化工有限公司", expand: false },
                { name: "阿维菌素 1.8%", type: "杀虫剂", number: "PD20093406", componey: "安徽美程化工有限公司", expand: true },
                { name: "阿维菌素 1.8%", type: "杀虫剂", number: "PD20093406", componey: "安徽美程化工有限公司", expand: false },
            ],

            // 农资领用登记列表
            nzlydjTableData: [
                { date: "2019-01-01" }
            ],
            // 分页配置
            paginationConfig: {
                currentPage: 1,
                pageSize: 10,
                total: 500
            },


            // 农业废弃回收内部切换选中
            nyfqhsActiveBtn: 0,
            nyfqhsBrnList: [
                { name: "回收概览" },
                { name: "回收流程" },
            ],
            // 回收概览头部列表
            hsglTopList: [
                { number: 1654, unit: "次", name: "回收服务", class: "gradient-32F0FF" },
                { number: 3600, unit: "条", name: "回收登记", class: "gradient-16F025" },
                { number: 2420, unit: "分", name: "积分发放", class: "gradient-EBF30F" },
            ],
            // 回收概览表格数据
            hsglTableData: [
                { date: "2019-01-01" }
            ],
            // 回收概览分页配置
            hsglPaginationConfig: {
                currentPage: 1,
                pageSize: 10,
                total: 500
            },
        }
    },
    computed: {
        /*图表配置*/
        chartOption() {
            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: "rgba(0, 34, 39, 0.70)",
                    borderWidth: 0,
                    formatter: function (params) {
                        return `
                            <div class="chart-tootip-box">
                                <span>${params[0].name}</span>
                                <p>
                                    <span>${params[0].seriesName}：</span>
                                    <span><span>${params[0].value}</span>单</span>
                                </p>
                            </div>
                        `;
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '3%',
                    top: '30',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#fff"
                    },
                    data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
                },
                yAxis: [
                    {
                        name: '单位：单',
                        type: 'value',
                        nameTextStyle: {
                            fontFamily: "SourceHanSansCNRegular",
                            color: "#32F0FF",
                            align: "left"
                        }
                    }
                ],
                series: [
                    {
                        name: '回收服务',
                        type: 'line',
                        smooth: true,
                        data: [7, 8, 8, 11, 6],
                        barWidth: 20,
                        itemStyle: {
                            color: "#3CF1FF"
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0, 234, 255, 0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(0, 234, 255, 0)'
                            }])
                        }
                    }
                ]
            };

            return option;
        },
    },
    methods: {
        /**
         * 分页页数改变
         */
        handleCurrentChange(val) {
            this.paginationConfig.currentPage = val;
        },
        /**
         * 分页每页显示条数改变
         */
        handleSizeChange(val) {
            this.paginationConfig.pageSize = val;
        },

        /**
         * 回收概览
         * 分页页数改变
         */
        hsglCurrentChange(val) {
            this.hsglPaginationConfig.currentPage = val;
        },
        /**
         * 回收概览
         * 分页每页显示条数改变
         */
        hsglSizeChange(val) {
            this.hsglPaginationConfig.pageSize = val;
        }
    },
    mounted() {

    }
});


/**
 * 监测设备 | 设备告警
 */
Vue.component("jcsbsbgj-com", {
    props: {
        // 头部索引
        index: {
            type: Number,
            default: 0
        }
    },
    template: `
        <div class="jcsbsbgj-com-box">
            <div class="jcsb-com-box" v-show="index === 0">
                <p>
                    <img src="../../resources/img/jiangshan/hnbt-icon.png" alt="">
                    <span class="gradient-FFE932">设备列表</span>
                </p>
                <div class="jcsb-com-table">
                    <el-table :data="jcsbTableData" stripe style="width: 100%">
                        <el-table-column prop="date" label="序号">
                        </el-table-column>
                        <el-table-column prop="date" label="设备名称">
                        </el-table-column>
                        <el-table-column prop="date" label="终端唯一识别码">
                        </el-table-column>
                        <el-table-column prop="date" label="设备状态">
                        </el-table-column>
                        <el-table-column prop="date" label="安装位置">
                            <template slot-scope="scope">
                                <div class="dialog-position-box">
                                    <img src="../../resources/img/jiangshan/dialog-position.png" alt="">
                                    <span>江山市-张村乡</span>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-box">
                    <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="paginationConfig.total"
                        :current-page="paginationConfig.currentPage"
                        :page-size="paginationConfig.pageSize"
                        @current-change="jcsbCurrentChange"
                        @size-change="jcsbSizeChange">
                    </el-pagination>
                </div>
            </div>
            <div class="jcsb-com-box" v-show="index === 1">
                <p>
                    <img src="../../resources/img/jiangshan/hnbt-icon.png" alt="">
                    <span class="gradient-FFE932">告警列表</span>
                </p>
                <div class="jcsb-com-table">
                    <el-table :data="warnTableData" stripe style="width: 100%">
                        <el-table-column prop="date" label="告警等级">
                        </el-table-column>
                        <el-table-column prop="date" label="告警时间">
                        </el-table-column>
                        <el-table-column prop="date" label="告警类型">
                        </el-table-column>
                        <el-table-column prop="date" label="建议措施">
                        </el-table-column>
                        <el-table-column prop="date" label="状态">
                        </el-table-column>
                        <el-table-column prop="date" label="处理时间">
                        </el-table-column>
                        <el-table-column prop="date" label="操作">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-box">
                    <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="warnPaginationConfig.total"
                        :current-page="warnPaginationConfig.currentPage"
                        :page-size="warnPaginationConfig.pageSize"
                        @current-change="warnCurrentChange"
                        @size-change="warnSizeChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            // 监测设备列表
            jcsbTableData: [
                { date: "2019-01-01" }
            ],
            // 监测设备分页配置
            paginationConfig: {
                currentPage: 1,
                pageSize: 10,
                total: 500
            },


            // 告警列表
            warnTableData: [
                { date: "2019-01-01" }
            ],
            // 告警分页配置
            warnPaginationConfig: {
                currentPage: 1,
                pageSize: 10,
                total: 500
            },
        }
    },
    methods: {
        /**
         * 监测设备分页页数改变
         */
        jcsbCurrentChange(val) {
            this.paginationConfig.currentPage = val;
        },
        /**
         * 监测设备分页每页显示条数改变
         */
        jcsbSizeChange(val) {
            this.paginationConfig.pageSize = val;
        },

        /**
         * 告警分页页数改变
         */
        warnCurrentChange(val) {
            this.warnPaginationConfig.currentPage = val;
        },
        /**
         * 告警分页每页显示条数改变
         */
        warnSizeChange(val) {
            this.warnPaginationConfig.pageSize = val;
        },
    },
    mounted() {

    }
});


/**
 * 农技服务 | 农机维修
 */
Vue.component("njfwnjwx-com", {
    props: {
        // 组件索引
        index: {
            type: Number,
            default: 0
        }
    },
    template: `
        <div class="njfwnjwx-com-box">
            <div class="njfw-com-box" v-show="index === 0">
                <inner-btn-com v-model="btnActive" :btn-list="btnList"></inner-btn-com>
                <div class="njfw-content-box" v-show="btnActive === 0">
                    <div class="njfw-content" v-for="(item,index) in expertList" :key="index">
                        <div class="njfw-content-left">
                            <img :src="item.img" alt="" onerror="this.src='../../resources/img/jiangshan/dialog-njfw-def.png'">
                        </div>
                        <div class="njfw-content-right">
                            <p>
                                <span>{{item.name}}</span>
                                <span>{{item.title}}</span>
                                <span>服务人数：{{item.num}}</span>
                            </p>
                            <h5>中国水稻研究所 - 副研究员</h5>
                            <p class="mark">{{item.desc}}</p>
                        </div>
                    </div>
                </div>
                <div class="njfw-content-box njxq-content-box" v-show="btnActive === 1">
                    <div class="njxq-table-box">
                        <el-table :data="njxqTableData" stripe style="width: 100%">
                            <el-table-column prop="date" label="序号">
                            </el-table-column>
                            <el-table-column prop="date" label="服务单号">
                            </el-table-column>
                            <el-table-column prop="date" label="服务类型">
                            </el-table-column>
                            <el-table-column prop="date" label="服务人员">
                            </el-table-column>
                            <el-table-column prop="date" label="服务时间">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pagination-box">
                        <el-pagination
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="njxqPaginationConfig.total"
                            :current-page="njxqPaginationConfig.currentPage"
                            :page-size="njxqPaginationConfig.pageSize"
                            @current-change="mjxqCurrentChange"
                            @size-change="mjxqSizeChange">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <div class="njfw-com-box" v-show="index === 1">
                <div class="njxq-table-box">
                    <el-table :data="njwxTableData" stripe style="width: 100%">
                        <el-table-column prop="date" label="序号">
                        </el-table-column>
                        <el-table-column prop="date" label="农机SN">
                        </el-table-column>
                        <el-table-column prop="date" label="车牌号">
                        </el-table-column>
                        <el-table-column prop="date" label="农机类型">
                        </el-table-column>
                        <el-table-column prop="date" label="维修类型">
                        </el-table-column>
                        <el-table-column prop="date" label="所在地区">
                        </el-table-column>
                        <el-table-column prop="date" label="维修商">
                        </el-table-column>
                        <el-table-column prop="date" label="联系人">
                        </el-table-column>
                        <el-table-column prop="date" label="联系电话">
                        </el-table-column>
                        <el-table-column prop="date" label="联系地址">
                        </el-table-column>
                        <el-table-column prop="date" label="历史作业次数">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-box">
                    <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="njwxPaginationConfig.total"
                        :current-page="njwxPaginationConfig.currentPage"
                        :page-size="njwxPaginationConfig.pageSize"
                        @current-change="mjwxCurrentChange"
                        @size-change="mjwxSizeChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            // 内部按钮选中
            btnActive: 0,
            btnList: [
                {
                    name: "专家列表",
                    index: 0
                },
                {
                    name: "农技详情",
                    index: 1
                }
            ],
            // 专家列表
            expertList: [
                {
                    name: "徐春春",
                    title: "水稻产业经济",
                    num: "15",
                    img: "../../resources/img/jiangshan/dialog-njfw-demo.png",
                    desc: "徐春春，博士、副研究员，现任中国水稻研究所科技信息中心副主任(主持工作)、试验农场副场长（主持行政工作);长期从事粮食安全和水稻产业经济研究，先后在《RICE SCIENCE》《农业经济问题》等期刊发表论文50多篇;主笔撰写确保国家粮食安全、水稻产业绿色高质量发展等20余个专题调研报告，获省部级领导批示40余次;作为技术负责人，组织建成农业农村部水稻全产业链大数据平台，2022年12月通过验收;2010年，“国内外粮食信息集成与应用”获浙江省科学技术奖二等奖（第7完成人);2013年被评为农业部“全国粮食生产突出贡献农业科技人员”。"
                }, {
                    name: "徐春春",
                    title: "水稻产业经济",
                    num: "15",
                    img: "../../resources/img/jiangshan/dialog-njfw-demo.png",
                    desc: "徐春春，博士、副研究员，现任中国水稻研究所科技信息中心副主任(主持工作)、试验农场副场长（主持行政工作);长期从事粮食安全和水稻产业经济研究，先后在《RICE SCIENCE》《农业经济问题》等期刊发表论文50多篇;主笔撰写确保国家粮食安全、水稻产业绿色高质量发展等20余个专题调研报告，获省部级领导批示40余次;作为技术负责人，组织建成农业农村部水稻全产业链大数据平台，2022年12月通过验收;2010年，“国内外粮食信息集成与应用”获浙江省科学技术奖二等奖（第7完成人);2013年被评为农业部“全国粮食生产突出贡献农业科技人员”。"
                }, {
                    name: "徐春春",
                    title: "水稻产业经济",
                    num: "15",
                    img: "../../resources/img/jiangshan/dialog-njfw-demo.png",
                    desc: "徐春春，博士、副研究员，现任中国水稻研究所科技信息中心副主任(主持工作)、试验农场副场长（主持行政工作);长期从事粮食安全和水稻产业经济研究，先后在《RICE SCIENCE》《农业经济问题》等期刊发表论文50多篇;主笔撰写确保国家粮食安全、水稻产业绿色高质量发展等20余个专题调研报告，获省部级领导批示40余次;作为技术负责人，组织建成农业农村部水稻全产业链大数据平台，2022年12月通过验收;2010年，“国内外粮食信息集成与应用”获浙江省科学技术奖二等奖（第7完成人);2013年被评为农业部“全国粮食生产突出贡献农业科技人员”。"
                }, {
                    name: "徐春春",
                    title: "水稻产业经济",
                    num: "15",
                    img: "../../resources/img/jiangshan/dialog-njfw-demo.png",
                    desc: "徐春春，博士、副研究员，现任中国水稻研究所科技信息中心副主任(主持工作)、试验农场副场长（主持行政工作);长期从事粮食安全和水稻产业经济研究，先后在《RICE SCIENCE》《农业经济问题》等期刊发表论文50多篇;主笔撰写确保国家粮食安全、水稻产业绿色高质量发展等20余个专题调研报告，获省部级领导批示40余次;作为技术负责人，组织建成农业农村部水稻全产业链大数据平台，2022年12月通过验收;2010年，“国内外粮食信息集成与应用”获浙江省科学技术奖二等奖（第7完成人);2013年被评为农业部“全国粮食生产突出贡献农业科技人员”。"
                }, {
                    name: "徐春春",
                    title: "水稻产业经济",
                    num: "15",
                    img: "../../resources/img/jiangshan/dialog-njfw-demo.png",
                    desc: "徐春春，博士、副研究员，现任中国水稻研究所科技信息中心副主任(主持工作)、试验农场副场长（主持行政工作);长期从事粮食安全和水稻产业经济研究，先后在《RICE SCIENCE》《农业经济问题》等期刊发表论文50多篇;主笔撰写确保国家粮食安全、水稻产业绿色高质量发展等20余个专题调研报告，获省部级领导批示40余次;作为技术负责人，组织建成农业农村部水稻全产业链大数据平台，2022年12月通过验收;2010年，“国内外粮食信息集成与应用”获浙江省科学技术奖二等奖（第7完成人);2013年被评为农业部“全国粮食生产突出贡献农业科技人员”。"
                }
            ],

            // 农技详情列表
            njxqTableData: [
                { date: "2021-01-12" }
            ],
            // 农技详情分页配置
            njxqPaginationConfig: {
                currentPage: 1,
                pageSize: 10,
                total: 500
            },

            // 农技维修列表
            njwxTableData: [
                { date: "2021-01-12" }
            ],
            // 农技维修分页配置
            njwxPaginationConfig: {
                currentPage: 1,
                pageSize: 10,
                total: 500
            },
        }
    },
    methods: {
        /**
         * 农技详情分页页数改变
         */
        mjxqCurrentChange(val) {
            this.paginationConfig.currentPage = val;
        },
        /**
         * 农技详情分页每页显示条数改变
         */
        mjxqSizeChange(val) {
            this.paginationConfig.pageSize = val;
        },

        /**
         * 农技维修分页页数改变
         */
        mjwxCurrentChange(val) {
            this.paginationConfig.currentPage = val;
        },
        /**
         * 农技维修分页每页显示条数改变
         */
        mjwxSizeChange(val) {
            this.paginationConfig.pageSize = val;
        },
    },
    mounted() {

    }
});


/**
 * 农产品营销 | 农事研学
 */
Vue.component("ncpyxnsyx-com", {
    props: {
        // 头部选中索引
        index: {
            type: Number,
            default: 0
        }
    },
    template: ` 
        <div class="ncpyxnsyx-com-box jzymnstg-com-box">
            <div class="ncpyx-com-box" v-show="index === 0">
                <top-chart v-if="index === 0" :option="chartOption"></top-chart>
            </div>
            <div class="nsyx-com-box" v-show="index === 1">
                <inner-btn-com v-model="activeBtn" :btn-list="btnList" ></inner-btn-com>
                <div class="nsyx-content-box" v-show="activeBtn === 0">
                    <div class="jzym-com-top">
                        <div class="jzym-com-top-box" v-for="(item,index) in topYxglList" :key="index">
                            <p :class="item.class">
                                <span>{{item.number}}</span>
                                <span>{{item.unit}}</span>
                            </p>
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                    <div class="yxgl-chart-box">
                        <top-chart v-if="activeBtn === 0 && index === 1" :option="chartOption2"></top-chart>
                    </div>
                </div>
                <div class="nsyx-content-box nykp-content-box" v-show="activeBtn === 1">
                    <h3>稻纵卷叶螟</h3>
                    <p>别名：刮青虫，白叶虫，苞叶虫；以幼虫吐丝纵卷水稻叶片成虫苞，幼虫躲在其中取食叶肉，留下表皮，形成白色条斑，致水稻千粒重降低，秕粒增加，造成减产。</p>
                    <p>防治方法：①释放赤眼蜂，在稻纵卷叶螟产卵始盛期至高峰期，分期分批放蜂，每亩每次放3～4万头，隔3天1次，连续放蜂3次。 ②一般在采用的防治指标为穗期虫
                    量20头/100丛，分蘖期40头/100丛；同时防治适期以幼虫盛孵期或3龄、4龄幼虫高峰期为宜。可选用以下药剂：氯虫•噻虫嗪；阿维•氯苯酰；多杀霉素。</p>
                    <div class="video-box">
                        <img src="../../resources/img/jiangshan/dialog-nykp-video-play.png" alt="">
                    </div>
                </div>
                <div class="nsyx-content-box nqjy-content-box" v-show="activeBtn === 2">
                    <div class="nzsp-table-box">     
                        <div class="table-head">
                            <li>活动名称</li>
                            <li>活动时间</li>
                            <li>活动反馈（满10分）</li>
                            <li>活动人数</li>
                            <li>活动详情</li>
                        </div>
                        <ul>
                            <div class="nzsp-table-content" v-for="(item,index) in nqjyTableData" :key="index + 'nzsp'"">
                                <li>
                                    <p>{{item.name}}</p>
                                    <p>{{item.time}}</p>
                                    <p style="color: #FFE932">{{item.feedback}}</p>
                                    <p>{{item.number}}人</p>
                                    <p :class="item.expand?'expand-active':''" @click="item.expand =!item.expand" class="expand">{{item.expand?'收起':'展开'}} <i class="el-icon-arrow-up"></i></p>
                                </li>
                                <div class="table-more" v-show="item.expand">
                                    
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
                <div class="nsyx-content-box ngtx-content-box" v-show="activeBtn === 3">
                    <div class="njfw-content" v-for="(item,index) in ngtxList" :key="index">
                        <div class="njfw-content-left">
                            <img :src="item.img" alt="" onerror="this.src='../../resources/img/jiangshan/dialog-ngty-demo.png'">
                        </div>
                        <div class="njfw-content-right">
                            <h5>{{item.name}}</h5>
                            <p class="mark">{{item.desc}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            // 按钮选中索引
            activeBtn: 0,
            // 按钮列表
            btnList: [
                { name: "研学概览" },
                { name: "农业科普" },
                { name: "农情教育" },
                { name: "农耕体验" },
            ],
            // 研学概览头部列表
            topYxglList: [
                { number: 1654, unit: "人/次", name: "农情教育服务", class: "gradient-32F0FF" },
                { number: 3600, unit: "次", name: "农业科普访问", class: "gradient-16F025" },
                { number: 431, unit: "次", name: "农耕体验", class: "gradient-EBF30F" },
                { number: 1431, unit: "次", name: "休闲观光", class: "gradient-F98D0D" },
            ],

            // 农情教育列表
            nqjyTableData: [
                {
                    name: "水稻基地研学二期",
                    time: "2023/11/16 9:30",
                    feedback: "9.5",
                    number: "17",
                    expand: false
                },
                {
                    name: "猕猴桃采摘研学",
                    time: "2023/8/23 10:00",
                    feedback: "9.3",
                    number: "56",
                    expand: false
                },
            ],

            // 农耕体验列表
            ngtxList: [
                { name: "江山耕读农场", desc: "同学们认真聆听讲解员的讲解，认识了木犁、斗笠、蓑衣等先辈们使用的劳动工具，了解农耕劳作的辛苦，感悟我国古代劳动人民的智慧。接着，他们化身小小磨豆匠，亲身体验豆浆的制作过程，你放豆子，我摇磨，他接浆，有条不紊地进行着。", img: "../../resources/img/jiangshan/dialog-ngty-demo.png" },
                { name: "江山大桥镇农耕文化展示馆", desc: "整个农耕文化展览馆占地面积约930平方米，以“千秋大业，系于陇亩”为主题，由山越稻香壤歌悠邈馆、春秧秋实稻香万年馆、天地有节风雅中华馆、共同富裕砥砺前行馆四个展馆及户外休闲区组成。馆内现有藏品30余件，详尽展现了自古至今当地群众的生活、生产及手工制造等劳作场景，以丰富多样的乡村历史遗痕生动展现了社会变迁。", img: "../../resources/img/jiangshan/dialog-ngty-demo.png" },
                { name: "“寻根之旅”夏令营——浙江衢州江山营", desc: "一粥一饭,当思来处不易。本次活动旨在让营员们通过实践，探寻“食物之根”，感受中国传统农耕文化中蕴含的辛勤和智慧。此次“中国寻根之旅”夏令营活动营地设在江山中学，为期10天，以“学习中华传统优秀文化，体验乡情民俗”为主要活动内容，营员们将体验中文、书法、太极拳、陶艺、脸谱绘画、美食制作和美丽乡村行等丰富多彩的活动。", img: "../../resources/img/jiangshan/dialog-ngty-demo.png" }
            ]
        }
    },
    computed: {
        /*图表配置*/
        chartOption() {
            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: "rgba(0, 34, 39, 0.70)",
                    borderWidth: 0,
                    formatter: function (params) {
                        return `
                            <div class="chart-tootip-box">
                                <span>${params[0].name}</span>
                                <p>
                                    <span>${params[0].seriesName}：</span>
                                    <span><span style="color: #3BFBC7;">${params[0].value}</span>吨</span>
                                </p>
                            </div>
                        `;
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: '0',
                    right: '4%',
                    bottom: '3%',
                    top: '30',
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#fff"
                    },
                    data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
                },
                yAxis: [
                    {
                        name: '单位：吨',
                        type: 'value',
                        nameTextStyle: {
                            fontFamily: "SourceHanSansCNRegular",
                            color: "#32F0FF",
                            align: "left"
                        }
                    }
                ],
                series: [
                    {
                        name: '销量',
                        type: 'line',
                        smooth: true,
                        data: [7, 8, 8, 11, 6],
                        barWidth: 20,
                        itemStyle: {
                            color: "#32F0FF"
                        }
                    }
                ]
            };

            return option;
        },
        /*图表配置*/
        chartOption2() {
            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: "rgba(0, 34, 39, 0.70)",
                    borderWidth: 0,
                    formatter: function (params) {
                        return `
                            <div class="chart-tootip-box">
                                <span>${params[0].name}</span>
                                <p>
                                    <span>${params[0].seriesName}：</span>
                                    <span><span style="color: #3BFBC7;">${params[0].value}</span>吨</span>
                                </p>
                            </div>
                        `;
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: '0',
                    right: '4%',
                    bottom: '3%',
                    top: '30',
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#fff"
                    },
                    data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
                },
                yAxis: [
                    {
                        name: '单位：吨',
                        type: 'value',
                        nameTextStyle: {
                            fontFamily: "SourceHanSansCNRegular",
                            color: "#32F0FF",
                            align: "left"
                        }
                    }
                ],
                series: [
                    {
                        name: '销量',
                        type: 'line',
                        smooth: true,
                        data: [7, 8, 8, 11, 6],
                        barWidth: 20,
                        itemStyle: {
                            color: "#32F0FF"
                        }
                    }
                ]
            };

            return option;
        },
    },
    methods: {

    },
    mounted() {

    }
});


/**
 * 地块弹框
 */
Vue.component("land-com", {
    props: {

    },
    template: `
        <div class="land-com-box">
            <p>
                <img src="../../resources/img/jiangshan/hnbt-icon.png" alt="">
                <span class="gradient-FFE932">基础信息</span>
                <img class="select-icon" src="../../resources/img/jiangshan/dialog-land-select.png" alt="">
            </p>
            <ul>
                <li>
                    <span>地块编号：</span>
                    <span>127</span>
                </li>
                <li>
                    <span>地块区域：</span>
                    <span>核心区</span>
                </li>
                <li>
                    <span>作物品种：</span>
                    <span>浙贝母3号</span>
                </li>
                <li>
                    <span>前茬作物：</span>
                    <span>浙贝母3号</span>
                </li>
                <li>
                    <span>面积：</span>
                    <span>143.52亩</span>
                </li>
                <li>
                    <span>作物种类：</span>
                    <span>浙贝母</span>
                </li>
                <li>
                    <span>生育期：</span>
                    <span>出苗期</span>
                </li>
                <li>
                    <span>种植方式：</span>
                    <span>轮作</span>
                </li>
            </ul>
            <p>
                <img src="../../resources/img/jiangshan/hnbt-icon.png" alt="">
                <span class="gradient-FFE932">服务概况</span>
            </p>
            <div class="fwgk-content-box">
                <img class="land-left" src="../../resources/img/jiangshan/dialog-land-left.png" alt="">
                <img class="land-right" src="../../resources/img/jiangshan/dialog-land-right.png" alt="">
                <div class="fwgk-chart-box">
                    <top-chart :option="chartOption"></top-chart>
                </div>
            </div>
        </div>
    `,
    data() {
        return {

        }
    },
    computed: {
        // 图表配置
        chartOption() {
            let colorList = ["#32F0FF"];
            const option = {
                color: ["#32F0FF"],
                backgroundColor: "transparent",

                tooltip: {
                    show: false
                },
                animationDurationUpdate: function (idx) {
                    // 越往后的数据延迟越大
                    return idx * 100;
                },
                animationEasingUpdate: "bounceIn",
                color: ["#fff", "#fff", "#fff"],
                series: [
                    {
                        type: "graph",
                        layout: "none",
                        roam: true,
                        label: {
                            normal: {
                                show: true,
                                fontFamily: "SourceHanSansCNRegular",
                                formatter: function (params) { 
                                    return `{a|${params.value}}{b|次}\n{c|${params.name}}`
                                },
                                rich: {
                                    a: {
                                        fontFamily: "SourceHanSansCNRegular",
                                        align: "center",
                                        fontSize: 24,
                                    },
                                    b: {
                                        color: "#fff",
                                        fontFamily: "SourceHanSansCNRegular",
                                        padding: [ 7, 0, 0, 2],
                                    },
                                    c: {
                                        color: "#fff",
                                        fontFamily: "SourceHanSansCNRegular",
                                        lineHeight: 25,
                                        fontSize: 14
                                    }
                                }
                            },
                        },
                        data: [
                            {
                                x: 60,
                                y: 80,
                                name: "农机服务",
                                value: 10,
                                symbolSize: 90,
                                draggable: true,
                                symbol: "image://../../resources/img/jiangshan/dialog-land-ball1.png",
                                label: {
                                    color: "#32F0FF"
                                }
                            },
                            {
                                x: 130,
                                y: 170,
                                name: "农技服务",
                                value: 1,
                                symbolSize: 110,
                                draggable: true,
                                symbol: "image://../../resources/img/jiangshan/dialog-land-ball2.png",
                                label: {
                                    color: "#3AFFA5"
                                }
                            },
                            {
                                x: 180,
                                y: 80,
                                name: "农资服务",
                                value: 6,
                                symbolSize: 80,
                                draggable: true,
                                symbol: "image://../../resources/img/jiangshan/dialog-land-ball3.png",
                                label: {
                                    color: "#DAD14A"
                                }
                            },
                            {
                                x: 250,
                                y: 150,
                                name: "农事服务",
                                value: 18,
                                symbolSize: 90,
                                draggable: true,
                                symbol: "image://../../resources/img/jiangshan/dialog-land-ball5.png",
                                label: {
                                    color: "#FF9854"
                                }
                            },
                            {
                                x: 380,
                                y: 90,
                                name: "烘干服务",
                                value: 1,
                                symbolSize: 130,
                                draggable: true,
                                symbol: "image://../../resources/img/jiangshan/dialog-land-ball4.png",
                                label: {
                                    color: "#F196DD"
                                }
                            },
                            {
                                x: 340,
                                y: 200,
                                name: "育苗服务",
                                value: 2,
                                symbolSize: 80,
                                draggable: true,
                                symbol: "image://../../resources/img/jiangshan/dialog-land-ball6.png",
                                label: {
                                    color: "#F48585"
                                }
                            },
                            {
                                x: 470,
                                y: 190,
                                name: "托管服务",
                                value: 1,
                                symbolSize: 100,
                                draggable: true,
                                symbol: "image://../../resources/img/jiangshan/dialog-land-ball7.png",
                                label: {
                                    color: "#A28BEC"
                                }
                            },
                            {
                                x: 570,
                                y: 100,
                                name: "研学服务",
                                value: 15,
                                symbolSize: 100,
                                draggable: true,
                                symbol: "image://../../resources/img/jiangshan/dialog-land-ball8.png",
                                label: {
                                    color: "#91CFFF"
                                }
                            },
                        ],
                    },
                ],
            };
            return option;
        }
    },
    methods: {

    },
    mounted() {

    }
});